<!DOCTYPE html>
<html>
<head>
  <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="../css/froala_editor.min.css" rel="stylesheet" type="text/css">


  <style>
    body {
      text-align: center;
    }

    section {
      width: 80%;
      margin: auto;
      text-align: left;
    }
  </style>
</head>

<body>
<section id="editor">
  <a href="#" class="edit">Link To Test on</a>

  <div class="edit2">Hello people. Here we are on the moon.</div>
</section>

<script src="../js/libs/jquery-1.11.1.min.js"></script>
<script src="../js/froala_editor.min.js"></script>
<!--[if lt IE 9]>
<script src="../js/froala_editor_ie8.min.js"></script>
<![endif]-->
<script src="../js/plugins/tables.min.js"></script>
<script src="../js/plugins/lists.min.js"></script>
<script src="../js/plugins/colors.min.js"></script>
<script src="../js/plugins/media_manager.min.js"></script>
<script src="../js/plugins/font_family.min.js"></script>
<script src="../js/plugins/font_size.min.js"></script>
<script src="../js/plugins/block_styles.min.js"></script>
<script src="../js/plugins/video.min.js"></script>

<script>
  $(function () {
    $('.edit').editable({
      linkList: [
        {
          body: 'Google',
          title: 'An awesome search engine',
          href: 'http://google.com',
          nofollow: true,
          blank: true
        },
        {
          body: 'Froala',
          title: 'An website builder for everyone',
          href: 'http://froala.com',
          nofollow: false,
          blank: false
        }
      ],

      linkClasses: {
        'f-link': 'Simple link',
        'r-link': 'Reversed link'
      }
    })

    $('.edit2').editable()
  });
</script>
</body>
</html>
